import { computed } from 'vue'
import { PC_DEVICE_WIDTH } from '@/constants'
import { useWindowSize } from '@vueuse/core'
const { width } = useWindowSize()
/**
 * 判断当前设备是否为移动端设备,判断依据为屏幕宽度是否大于指定的值(1280)
 */
// export const isMobileTerminal = computed(() => {
//   return width.value < PC_DEVICE_WIDTH
//   // return document.documentElement.clientWidth < PC_DEVICE_WIDTH
// })
/**
 * 判断当前是否为移动设备
 */
export const isMobileTerminal = computed(() => {
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    navigator.userAgent
  )
})

/**
 * 初始化 rem 基准值，最大为 40px
 */
export const useREM = () => {
  // 定义最大的fontSize
  const MAX_FONT_SIZE = 40
  // 监听html文档被解析完成的事件
  document.addEventListener('DOMContentLoaded', () => {
    // 获取html标签
    const html = document.querySelector('html')
    // 获取根元素fontSize标准,屏幕宽度/10.（以 Iphone 为例 Iphone 6 屏幕宽度为 375，则标准 fontSize 为 37.5）
    let fontSize = window.innerWidth / 10
    fontSize = fontSize > MAX_FONT_SIZE ? MAX_FONT_SIZE : fontSize
    // 定义根元素（html）fontSize 的大小 （rem）
    html.style.fontSize = fontSize + 'px'
  })
}
